<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col group_3">
      <view class="fun-flex-col">
        <text class="fun-self-start text_3">Forgot your password?</text>
        <view class="fun-mt-12 fun-flex-col fun-self-stretch group_4">
          <text class="font_2 text_4">
            Please enter your user name below and we'll send a verification code to the email address you're tied to to
            verify your identity.
          </text>
          <view class="fun-mt-18 fun-flex-row section">
            <image class="fun-self-center image_5" src="../../static/e9ed5dfe3443cbdacb9cc14d13f3a4db.png" />
            <input class="fun-self-start font_2 text_5 text_6 ml-15" type="text" placeholder="Enter your username"/>
          </view>
        </view>
      </view>
      <view class="fun-flex-col group_5">
        <input class="fun-self-start text_7" type="text" placeholder="Set a new password"/>
        <view class="fun-mt-14 fun-flex-col fun-self-stretch">
          <view class="fun-flex-col fun-justify-start fun-items-start text-wrapper">
            <input class="font_2 text_8" type="text" placeholder="Please enter a new password"/>
          </view>
          <view class="fun-mt-16 fun-flex-col fun-justify-start fun-items-start text-wrapper_2">
            <input class="font_2 text_9" type="text" placeholder="Please enter the new password again."/>
          </view>
          <view class="fun-mt-16 fun-flex-row fun-justify-between fun-items-center section_2">
            <input class="font_2 text_10" type="text" placeholder="Enter the verification code"/>
            <view class="fun-flex-col fun-justify-start text-wrapper_3">
              <text class="text_11">Send verification code</text>
            </view>
          </view>
        </view>
        <text class="fun-mt-14 fun-self-stretch text_12">
          A verification code has been sent to your bound email address.
        </text>
      </view>
      <view class="fun-flex-col group_6">
        <view class="fun-flex-col fun-justify-start fun-items-center fun-self-stretch text-wrapper_4">
          <text class="font text_13" @click="confirm">Confirm</text>
        </view>
        <view class="fun-self-center group_7 mt-19">
          <text class="font_3">
            Still have quesions?
            <br />
          </text>
          <text class="font_3">Please contact :</text>
          <text class="font_3 text_14">server@trade.com</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {};
    },

    methods: {
		confirm(){
			uni.navigateTo({url:'/pages/login/resetSuccess'})
		}
	},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .ml-15 {
    margin-left: 30rpx;
  }
  .mt-19 {
    margin-top: 38rpx;
  }
  .page {
    padding: 36rpx 0 126rpx;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 68rpx;
      padding-right: 28rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
        line-height: 22.18rpx;
      }
      .image {
        width: 34rpx;
        height: 22rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 22rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }
    .group_2 {
      margin-top: 48rpx;
      padding: 16rpx 32rpx 8rpx;
      .image_4 {
        width: 48rpx;
        height: 48rpx;
      }
      .pos {
        position: absolute;
        left: 32rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      .text_2 {
        color: #ffffff;
        font-weight: 300;
      }
    }
    .group_3 {
      margin-top: 104rpx;
      padding: 0 42rpx;
      .text_3 {
        margin-left: 16rpx;
        color: #ffffff;
        font-size: 48rpx;
        font-family: SF Pro Display;
        font-weight: 700;
        line-height: 43.6rpx;
      }
      .group_4 {
        margin-right: 12rpx;
        .text_4 {
          margin: 0 12rpx;
          line-height: 34rpx;
          font-weight: unset;
        }
        .section {
          padding: 24rpx 24rpx 28rpx;
          background-color: #1b1d53;
          border-radius: 50rpx;
          .image_5 {
            width: 36rpx;
            height: 36rpx;
          }
          .text_6 {
            margin-top: 12rpx;
            line-height: 24.88rpx;
          }
        }
      }
      .group_5 {
        margin-top: 52rpx;
        .text_7 {
          margin-left: 16rpx;
          color: #ffffff;
          font-size: 32rpx;
          font-family: SF Pro Display;
          font-weight: 700;
          line-height: 28.4rpx;
        }
        .text-wrapper {
          margin-right: 12rpx;
          padding: 36rpx 0 32rpx;
          background-color: #1b1d53;
          border-radius: 50rpx;
          .text_8 {
            margin-left: 40rpx;
            line-height: 24.44rpx;
          }
        }
        .text-wrapper_2 {
          margin-right: 12rpx;
          padding: 36rpx 0 28rpx;
          background-color: #1b1d53;
          border-radius: 50rpx;
          .text_9 {
            margin-left: 40rpx;
            line-height: 25rpx;
          }
        }
        .section_2 {
          margin-right: 12rpx;
          padding-left: 44rpx;
          background-color: #1b1d53;
          border-radius: 50rpx;
          .text_10 {
            line-height: 20rpx;
          }
          .text-wrapper_3 {
            padding: 40rpx 0;
            background-color: #5ceec4;
            border-radius: 50rpx;
            height: 92rpx;
            .text_11 {
              margin-left: 20rpx;
              margin-right: 12rpx;
              color: #000000;
              font-size: 20rpx;
              font-family: SF Pro Display;
              font-weight: 300;
              line-height: 14.54rpx;
            }
          }
        }
        .text_12 {
          margin-left: 20rpx;
          color: #b0b0bf;
          font-size: 24rpx;
          font-family: SF Pro Display;
          line-height: 21.56rpx;
        }
      }
      .font_2 {
        font-size: 28rpx;
        font-family: SF Pro Display;
        font-weight: 300;
        color: #ffffff;
		width: 100%;
      }
      .group_6 {
        margin-right: 12rpx;
        margin-top: 240rpx;
        .text-wrapper_4 {
          padding: 32rpx 0;
          background-color: #5ceec4;
          border-radius: 44rpx;
          .text_13 {
            color: #000000;
            font-weight: 700;
            line-height: 24.08rpx;
          }
        }
        .group_7 {
          text-align: center;
          .font_3 {
            font-size: 24rpx;
            font-family: Roboto;
            line-height: 40.8rpx;
            color: #b2b2b2;
          }
          .text_14 {
            color: #175bae;
          }
        }
      }
    }
    .font {
      font-size: 32rpx;
      font-family: SF Pro Display;
      line-height: 22.82rpx;
    }
  }
</style>